<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<style>
			body>div{
/* 				width: 200px;
				height: 200px; */
				border: 1px solid red;
				overflow: hidden;
			}
			div>div{
				margin: 0 10px 10px 0;
			}
			#d1{
				width: 50px;
				height: 50px;
				background-color: red;
				float: left;
			}
			#d2{
				width: 50px;
				height: 50px;
				background-color: green;
				float: left;
			}
			#d3{
				width: 50px;
				height: 50px;
				background-color: blue;
				float: left;
			}
			ul{
				/* 去除图标 */
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
				margin-right: 20px;
			}
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="">首页</li>
			<li><a href="">免费课</li>
			<li><a href="">直播课</li>
			<li><a href="">线上班</li>
			<li><a href="">线下班</li>
		</ul>
		<div>
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
			<!-- <p>dasndiansndbav</p> -->
		</div>
	</body>
</html>